<!DOCTYPE html>
<html>
<include file="layer:layer_head"/>
<body>
    <!-- 内容主体区域 -->
    <div style="padding:15px;height: 100%;">
        <div class="layui-row">
            <div class="layui-col-xs7">
                <div class="layui-form">
                    <div class="layui-form-item">
                        <label class="layui-form-label"> <span style="color: #FF5722;">*</span> 菜单名称 </label>
                        <div class="layui-input-block">
                            <input type="text" class="layui-input" name="name" placeholder="菜单名" required lay-verify="required">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label"> 上级菜单 </label>
                        <div class="layui-input-block">
                            <select name="menu" lay-filter="menu">
                                <option value="0">顶级菜单</option>
                                <foreach name="menu" item="m">
                                    <option value="<{$m.id}>"><{$m.name}></option>
                                </foreach>
                            </select>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label"> 菜单图标 </label>
                        <div class="layui-input-block">
                            <input type="text" class="layui-input" name="icon" placeholder="一级菜单需配置">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label"> 链接 </label>
                        <div class="layui-input-block">
                            <input type="text" class="layui-input" name="href" placeholder="示例:/enjoy/index/index.html">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label"> <span style="color: #FF5722;">*</span> 排序 </label>
                        <div class="layui-input-block">
                            <input type="text" class="layui-input" name="sort" placeholder="数字越小越靠前" autocomplete="off" required lay-verify="required|number">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label"> 是否启用 </label>
                        <div class="layui-input-block">
                            <input type="checkbox" name="use_status" lay-skin="switch" lay-text="ON|OFF" checked value="1">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button class="layui-btn layui-btn-normal" lay-submit lay-filter="addMenu">
                                <i class="iconfont icon-jiajianzujianjiahao"></i>
                                添加
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<include file="layer:layer_js"/>
<!--自己的js代码引入-->
<script type="text/javascript">
layui.use('form',function () {
    var form = layui.form;
    form.on('submit(addMenu)',function (data) {
        var json = data.field;
        if(!('use_status' in json)){
            json.use_status = '0';
        }
        var add_url = root+"/admin/menu/addmenu";
        $.post(add_url,json,function (res) {
            if(res.status){
                dialog.success(res.info,function () {
                    var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                    parent.layer.close(index); //再执行关闭
                });
            }else{
                dialog.error(res.info);
            }
        });
        return false;
    });
    form.on('select(menu)',function (data) {
        var menu_id = data.value;
        if(menu_id != 0){
            //不允许填写图标
            $("[name=icon]").attr("disabled",true);
        }else{
            $("[name=icon]").removeAttr("disabled");
        }
    })
});
</script>
</html>